<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NCRE</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <meta name="viewport" content="width=device-width" />
    <style>
        .page-content{
            width:calc(100% - 30px);
            padding:10px 15px;
            min-height:calc(100vh - 50px);
            background-color: #04548c;
            padding-bottom: 40px;
        }
        .page-content .practice-info{
            color:#fff;
            margin-top:15px;
        }
        .question-content{
            width:calc(100% - 30px);
            margin-top:15px;
            padding:10px 15px;
            background-color: #fff;
            border-radius: 10px;
            min-height: 300px;
        }
        .bottom-bar{
            position: fixed;
            bottom: 0px;
            left:0px;
            width:calc(100% - 30px);
            height:40px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0 15px;
        }
        .bottom-bar .button{
            line-height:20px;
            height:20px;
            padding:5px 10px;
        }
        .bottom-bar .button.detail-button{
            border: 1px solid #999;
            color: #999;
        }
        .bottom-bar .button.detail-button.actived{
            border: 1px solid #04548c;
            color: #04548c;
            font-weight: 500;
        }
        .bottom-bar .button.finish-button{
            background-color:#04548c;
            color: #fff;
        }
        .bottom-bar .iconfont{
            font-size:36px;
            color: #04548c;
        }

        .bottom-bar .iconfont.disabled{
            color: #eee;
        }

        .que-options .option-item{
            display: flex;
            width:calc(100% - 20px);
            align-items: center;
            margin:5px auto;
            padding:5px 10px;
        }
        .que-options .option-item.wrong{
            background-color: rgba(174,57,26,0.2);
            border:1px solid rgba(174,57,26,0.5);
            border-radius: 5px;
        }
        .que-options .option-item.correct{
            background-color: rgba(105,163,68,0.2);
            border:1px solid rgba(105,163,68,0.5);
            border-radius: 5px;
        }
        .que-options .option-item .item-label{
            width:36px;
            height:36px;
            border-radius: 50%;
            background-color: #eee;
            color:#999;
            text-align: center;
            line-height: 36px;
            margin-right:5px;
        }
        .que-options .option-item .item-label.wrong{
            background-color: #bd2c00;
            color:#fff;
        }
        .que-options .option-item .item-label.correct{
            background-color: #55a532;
            color:#fff;
        }
        .que-options .option-item .item-text{
            flex: 1;
        }
        .jiexi-box{
            width:calc(100% - 20px);
            padding:5px 10px;
            border:2px dashed #04548c;
            background-color: rgba(35,83,136,0.1);
            border-radius: 5px;
            position: relative;
            margin-top:30px;
        }
        .jiexi{
            margin-top:10px;
            margin-bottom:5px;
            position: absolute;
            top: -10px;
            left: -7px;
            transform: rotate(-45deg);
            background-color: #bd2c00;
            color:#fff;
            padding: 0 5px;
            font-size:80%;
        }
        .jiexi-content{
            text-indent: 28px;
        }

        .next-button{
            margin-top:30px;
            width:100%;
            background-color:#04548c;
            color: #fff;
            text-align: center;
            height:28px;
            border-radius: 14px;
            line-height: 28px;
        }

        .favourate-button{
            color:#999;
            width:100%;
            text-align: center;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <div class="page-content">
        <div class="practice-info">本次练习
            <span id="answer-count">0</span>
            题，共
            <span id="total-count"></span>
            题，当前第
            <span id="que-number"></span>
            题。
        </div>
        <div class="question-content">

        </div>
        <div class="bottom-bar">
            <div class="left">
                <i class="iconfont icon-anniu_jiantouxiangzuo" id="pre-button"></i>
                <i class="iconfont icon-anniu-jiantouxiangyou" id="next-button"></i>
            </div>
            <div class="middle">
                <div class="button detail-button actived" id="show-jiexi">显示解析</div>
            </div>
            <div class="right">
                <div class="button finish-button" id="finish-button">结束练习</div>
            </div>
        </div>
    </div>
</body>
<script>
    //定义练习类型参数，从url中解析
    let type="all"
    //定义关键字参数，从url中解析
    let keyword=""

    let quesArr=[]

    //当前题号索引，对应获取到的题号数组
    let queIndex=-1

    //当前练习题单题数据对象
    let currentQuestion=null

    //是否显示解析，默认为显示
    let showJiexi=true
    //记录每一题作答时间：题目渲染完成时重置为0，用户选择作答时计算时间
    let answerTime=0

    //记录练习结果
    let answerList={}

    /**
     * 数据层：获取单题数据对象
     * @param queId 需要获取的题目id
     */
    function loadQuestion(queId){
        //请求题目数据对象
        apiRequest("GET","http://ncre2-server.nj-agile.com/api/que-chooses/"+queId,null,
            (result)=>{
                //将获得的题目对象赋值给页面变量
                currentQuestion=result
                //调用单个题目渲染
                renderQue()
            },
            true
        )
    }

    /**
     * 渲染当前题目
     */
    function renderQue(){
        console.log("当前题目：",queIndex,currentQuestion)
        //如果是最后一题，控制下一题按钮样式
        if(queIndex==quesArr.length-1){
            document.querySelector("#next-button").classList.add("disabled")
        }else{
            document.querySelector("#next-button").classList.remove("disabled")
        }
        //如果是第一题，控制上一题按钮样式
        if(queIndex==0){
            document.querySelector("#pre-button").classList.add("disabled")
        }else{
            document.querySelector("#pre-button").classList.remove("disabled")
        }

        //更新当前题号显示
        document.querySelector("#que-number").textContent=(queIndex+1)
        //清空目前题目
        let queContent=document.querySelector(".question-content")
        if(queContent!=null){
            while (queContent.firstChild) {
                queContent.removeChild(queContent.firstChild);
            }
        }
        //根据currentQuestion对象，渲染题目的dom结构
        if(currentQuestion!=null){
            //渲染题干
            let queText=document.createElement("div")
            queText.classList.add("que-text")
            queText.innerHTML=currentQuestion.title
            //添加题干到题目内容
            queContent.appendChild(queText)

            //渲染选项
            let optionList=document.createElement("div")
            optionList.classList.add("que-options")

            // <div class="option-item">
            //     <div class="item-label">D</div>
            //     <div className="item-text">由运算器和控制器组成</div>
            // </div>
            //选项A
            let optiona=document.createElement("div")
            optiona.classList.add("option-item")
            //为选项添加 ABCD class，方便读取当前选择的选项，进行正确答案的判断。
            optiona.classList.add("A")
            let optionaLabel=document.createElement("div")
            optionaLabel.classList.add("item-label")
            optionaLabel.textContent="A"
            optiona.appendChild(optionaLabel)
            let optionaText=document.createElement("div")
            optionaText.classList.add("item-text")
            optionaText.innerHTML=currentQuestion.a
            optiona.appendChild(optionaText)
            optionList.appendChild(optiona)

            //选项B
            let optionb=document.createElement("div")
            optionb.classList.add("option-item")
            optionb.classList.add("B")
            let optionbLabel=document.createElement("div")
            optionbLabel.classList.add("item-label")
            optionbLabel.textContent="B"
            optionb.appendChild(optionbLabel)
            let optionbText=document.createElement("div")
            optionbText.classList.add("item-text")
            optionbText.innerHTML=currentQuestion.b
            optionb.appendChild(optionbText)
            optionList.appendChild(optionb)

            //选项C
            let optionc=document.createElement("div")
            optionc.classList.add("option-item")
            optionc.classList.add("C")
            let optioncLabel=document.createElement("div")
            optioncLabel.classList.add("item-label")
            optioncLabel.textContent="C"
            optionc.appendChild(optioncLabel)
            let optioncText=document.createElement("div")
            optioncText.classList.add("item-text")
            optioncText.innerHTML=currentQuestion.c
            optionc.appendChild(optioncText)
            optionList.appendChild(optionc)

            //选项D
            let optiond=document.createElement("div")
            optiond.classList.add("option-item")
            optiond.classList.add("D")
            let optiondLabel=document.createElement("div")
            optiondLabel.classList.add("item-label")
            optiondLabel.textContent="D"
            optiond.appendChild(optiondLabel)
            let optiondText=document.createElement("div")
            optiondText.classList.add("item-text")
            optiondText.innerHTML=currentQuestion.d
            optiond.appendChild(optiondText)
            optionList.appendChild(optiond)

            //将选项添加到题目元素中
            queContent.appendChild(optionList)


            //解析部分
            // <div class="jiexi-box">
            //     <div class="jiexi">解析</div>
            //     <div className="jiexi-content">计算机硬件系统主要包含中央处理器（运算器和控制器）、存储器和各种输入输出设备。</div>
            // </div>
            let jiexibox=document.createElement("div")
            jiexibox.classList.add("jiexi-box")
            let jiexi=document.createElement("div")
            jiexi.classList.add("jiexi")
            jiexi.textContent="解析"
            let jiexicontent=document.createElement("div")
            jiexicontent.classList.add("jiexi-content")
            jiexicontent.innerHTML=currentQuestion.errormsg
            jiexibox.appendChild(jiexi)
            jiexibox.appendChild(jiexicontent)
            queContent.appendChild(jiexibox)
            //默认不显示解析，在答题后根据是否显示解析的标识来控制显示
            jiexibox.style.display="none"
            //题目渲染完成，重置练习时间
            answerTime=0

            //绑定选项点击事件
            optiona.addEventListener("click",function(){
                answer(optiona,true)
            })
            //绑定选项点击事件
            optionb.addEventListener("click",function(){
                answer(optionb,true)
            })
            //绑定选项点击事件
            optionc.addEventListener("click",function(){
                answer(optionc,true)
            })
            //绑定选项点击事件
            optiond.addEventListener("click",function(){
                answer(optiond,true)
            })

            //如果answerList中有本题的回答记录，自动选择
            if(answerList[quesArr[queIndex]]!=null){
                //读取之前选择的选项，调用answer方法进行结果显示
                //这个场景下的回答，不需要上报给api
                let answerDom=queContent.querySelector(".option-item."+answerList[quesArr[queIndex]])
                answer(answerDom,false)
                console.log("自动选择：",answerDom,answerList)
            }

            //如果不是最后一题，添加下一题按钮
            if(queIndex<quesArr.length-1){
                // <div class="next-button">下一题</div>
                let next=document.createElement("div")
                next.classList.add("next-button")
                next.textContent="下一题"
                next.addEventListener("click",function(){
                    nextQue()
                })
                queContent.appendChild(next)
            }
            // <div className="favourate-button">+添加此题到收藏</div>
            let favourate=document.createElement("div")
            favourate.classList.add("favourate-button")
            favourate.textContent="+添加此题到收藏"
            queContent.appendChild(favourate)
        }
    }

    /**
     * 回答题目
     * @param answerDom 选择的选项
     * @param submitFlag 是否要请求api上报结果
     */
    function answer(answerDom,submitFlag){
        //用户回答，记录练习时间
        let at=answerTime
        //从当前题目对象中获得正确答案
        let correctAnswer=currentQuestion.answer
        //通过点击的DOM解析出ABCD选项
        let studentAnswer=answerDom.querySelector(".item-label").textContent
        //记录学生本次作答结果
        let studentResult="正确"
        if(studentAnswer==correctAnswer){
            //答对的情况
            //当前选择的选项增加正确样式
            answerDom.classList.add("correct")
            answerDom.querySelector(".item-label").classList.add("correct")
        }else{
            //答错的情况
            studentResult="错误"
            //当前选择的选项增加错误样式
            answerDom.classList.add("wrong")
            answerDom.querySelector(".item-label").classList.add("wrong")
            //因为没有答对，说明选错了选项，需要通过答案找到正确的dom元素
            let correctDom=document.querySelector(".option-item."+correctAnswer)
            if(correctDom!=null){
                correctDom.classList.add("correct")
                correctDom.querySelector(".item-label").classList.add("correct")
            }
        }
        //无论是否正确，根据是否显示解析，控制解析的显示
        if(showJiexi){
            let jiexiBox=document.querySelector(".jiexi-box")
            if(jiexiBox){
                jiexiBox.style.display="block"
            }
        }

        //将本次作答记录到变量中
        answerList[quesArr[queIndex]]=studentAnswer

        if(submitFlag){
            //调用上报答题记录的方法
            logStudentAnswer(studentAnswer,studentResult,at)
        }

        //更新已作答题目数量
        if(Object.keys(answerList).length>0){
            document.querySelector("#answer-count").textContent=Object.keys(answerList).length
        }else{
            document.querySelector("#answer-count").textContent="0"
        }

    }
    /**
     * 交互层：下一题
     */
    function nextQue(){
        //如果当前索引号超出数组长度,不做处理
        if(queIndex<0 || queIndex>=quesArr.length-1) return
        //索引向前进1
        queIndex++
        loadQuestion(quesArr[queIndex])
    }

    /**
     * 交互层：上一题
     */
    function preQue(){
        //如果当前索引号小于0或者已经到了第一题，不做处理
        if(queIndex<=0) return
        //索引向前进1
        queIndex--
        //读取题目
        loadQuestion(quesArr[queIndex])
    }

    //绑定下一题按钮点击事件
    let nextButton=document.querySelector("#next-button")
    if(nextButton!=null){
        nextButton.addEventListener("click",function(){
            nextQue()
        })
    }

    //绑定上一题按钮点击事件
    let preButton=document.querySelector("#pre-button")
    if(preButton!=null){
        preButton.addEventListener("click",function(){
            preQue()
        })
    }

    /**
     * 处理显示解析按钮点击
     */
    function toggleJiexi(){
        showJiexi=!showJiexi
        let showJiexiButton=document.querySelector("#show-jiexi")
        if(showJiexi){
            showJiexiButton.classList.add("actived")
        }else{
            showJiexiButton.classList.remove("actived")
        }
    }

    //绑定显示解析按钮
    let showJiexiButton=document.querySelector("#show-jiexi")
    if(showJiexiButton!=null){
        showJiexiButton.addEventListener("click",function(){
            toggleJiexi()
        })
    }

    /**
     * 向api提交学生作答，记录结果
     * @param studentAnswer 学生选项
     * @param studentResult 判定结果
     * @param time 答题时间
     */
    function logStudentAnswer(studentAnswer,studentResult,time){
        apiRequest("POST","http://ncre2-server.nj-agile.com/api/student-exercisings",
            //按文档要求的数据格式，构造发送给api的数据
            JSON.stringify({
                "exam": {
                    "id": currentQuestion.exam.id
                },
                "exerciseType": type,
                "queChoose": {
                    "id": quesArr[queIndex]
                },
                "queType": "选择题",
                "studentAnswer": studentAnswer,
                "studentResult": studentResult,
                "answerTime":time
            }),
            (result)=>{
                console.log("答题结果上报：",result)
            }
            ,true)
    }

    //监听结束练习按钮点击
    let finishButton=document.querySelector("#finish-button")
    if(finishButton!=null){
        finishButton.addEventListener("click",function(){
            window.location.href="home.html"
        })
    }


    /**
     * 发送请求，获取本次练习的题目id数组
     */
    function getPracticeData(){
        apiRequest("GET","http://ncre2-server.nj-agile.com/api/que-chooses/ids?type="+type+"&keyword="+keyword,null,
            (result)=>{
                console.log("获取到题号数组：",result)
                quesArr=result
                //更新总题量显示
                document.querySelector("#total-count").textContent=quesArr.length
                if(quesArr.length>0){
                    queIndex=0
                    loadQuestion(quesArr[queIndex])
                }
            },true)
    }



    /**
     * HTTP请求方法简易封装
     * @param method 请求方式：GET/POST/PUT/DELETE
     * @param url 请求地址
     * @param data 发送的数据
     * @param callback function回调函数
     * @param isLogin 是否需要身份认证
     */
    function apiRequest(method,url,data,callback,isLogin){
        let request =  new XMLHttpRequest()
        request.onreadystatechange=function(){
            if(request.readyState==4){
                try{
                    let result=JSON.parse(request.responseText)
                    callback(result,request)
                }catch (e){
                    callback(request.responseText,request)
                }

            }
        }
        request.open(method,url)
        if(isLogin){
            let token=localStorage.getItem("token")
            request.setRequestHeader("Authorization","Bearer "+token)
            request.setRequestHeader("Content-Type","application/json")
        }
        request.send(data)
    }

    window.onload=function(){
        //将当前页面地址构造成URL对象
        let url=new URL(window.location.href)
        //解析type参数
        if(url.searchParams.get("type")){
            type=url.searchParams.get("type")
        }
        //解析keyword参数
        if(url.searchParams.get("keyword")){
            keyword=url.searchParams.get("keyword")
        }
        console.log("解析到页面参数：",type,keyword)
        //调用练习题api
        getPracticeData()

        //答题时间的计时器
        setInterval(()=>{
            answerTime++
        },1000)
    }

</script>
</html>